<%@ page language="java" session="true" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<jsp:include page="../common/framework/header.jsp" />
<link href="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<style type="text/css">
.row {
    margin: 0;
	}
</style>
	<div id="container"
		class="effect aside-float aside-bright mainnav-lg navbar-fixed mainnav-fixed aside-fixed">

		<jsp:include page="../common/framework/topper.jsp" />
		<div class="boxed">
			<%--=======================  页面主体内容  ============================--%>
			<div id="content-container">
				<div class="wrappers">
					<%--=========================  页面标题  ==========================--%>
					<div id="page-title">
						<p class="page-header text-overflow table-header">
							项目配置&nbsp;&nbsp;<small>项目是CTS系统下的管理单位，可以从其它系统同步而来，也可以自行创建，包含若干测试套件。详细说明请参考
							<a href="http://confluence.paas.sinopec.com/pages/viewpage.action?pageId=11343322#id-使用手册-_Toc471811809" target="_blank">&lt;使用手册&gt;</a></small>
						</p>
					</div>
					<ol class="breadcrumb">
						<li><a href="#">项目管理</a></li>
						<li class="active">项目配置</li>
					</ol>
					<div id="page-content">
						<div class="panel">
							<div class="panel-body pad-top-no">
								<div id="toolbar">
									<form id="search_form" class="form-inline" autocomplete="off">
										<label class="control-label width-auto" for="appName">项目名称:</label>
										<div class="input-group">
											<input id="searchProjectName" name="searchProjectName" type="text" placeholder="请输入项目名称模糊查询" class="form-control">
										  	<span class="input-group-btn" onclick="searchProjectName();">
												<a class="btn btn-icon btn-hover-primary" type="button" style="margin-right: 15px;">
													<i class="fa fa-search" ></i>
												</a>
											</span>
										</div>
										<a class="btn btn-primary pull-right" id="insert"  style="margin-top: 2px;">
											<i class="fa fa-plus"></i>添加
										</a>

									</form>
								</div>
                                  <table id="projectTable" class="table" data-single-select="true" data-toolbar="#toolbar" data-show-refresh="true"
               						data-show-toggle="true" data-show-columns="true"
               						 data-buttons-class="hover-primary">
                                      <thead>
								        <tr>
								            <th data-field="state" data-checkbox="true"></th>
								            <th data-field="projectName">项目名称</th>
								            <th data-field="sysName" >所属系统</th>
								            <th data-field="description" >描述</th>
								            <th data-field="address" >jira地址</th>
								            <th data-align="center" data-width="230" data-formatter="pref_btns">操作</th>
								        </tr>
								    </thead>
                                  </table>
							</div>
						</div>

			</div>
		</div>
	</div>

	<div id ="addOrEditProjectHtml" style="display:none;">
		<form id ="projectForm">
			   <div class = "row" style = "margin-top : 20px;padding-right:20px;">
			      <div class = "form-group col-sm-12 col-xs-12" >
		            <label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;"><font color=red>*</font>项目名称:</label>
		            <div class="col-xs-10" style="padding-right:0;">
						<input type = "text" class=" form-control" id="projectName" name = "projectName">
					</div>
				</div>
		     </div>
		      <div class = "row" style="padding-right:20px;">
		         <div class = "form-group col-sm-12 col-xs-12" >
		            <label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;">项目编号:</label>
	            	<div class="col-xs-10" style="padding-right:0;">
						<input type = "text" class="  form-control" id="prokey" name = "prokey">
					</div>
		         </div>
		     </div>
		     <div class=" row"  style="padding-right:20px;">
		     	<div class = "form-group col-sm-12 col-xs-12" >
		            <label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;">描述:</label>
		            <div class="col-xs-10" style="padding-right:0;">
			            <textarea class="form-control"  style="resize: none;" rows="2"
			            id = "description" name = "description" ></textarea>
		            </div>
		         </div>
		      </div>
		    </form>
		</div>

		<div id ="addSuitHtml" style="display:none;">
				<form id ="addSuiteForm">
			         <div class="row" style="margin-top:30px;padding-right:10px;">
				         <div class = "form-group col-sm-12 col-xs-12">
				            <label class="col-xs-2" style="padding:6px 0 0 0;text-align:right;"><font color=red>*</font>套件名称:</label>
				            <div class="col-xs-10" style="padding-right:0;">
				            	<input type="text" class=" form-control" id="suiteName" name="suiteName" placeholder = "请输入套件名称" >
				         	</div>
				         </div>
			         </div>
			    </form>
			</div>

		<%--=========================  过程可视化消息栏  ==========================--%>
		<jsp:include page="../common/framework/aside.jsp" />

		<%--=========================  左侧菜单  ==========================--%>
		<jsp:include page="../common/framework/lefter.jsp" />

	</div>

	<%--=========================  页面底部版权信息  ==========================--%>
	<jsp:include page="../common/framework/footer.jsp" />
	<%--=========================  选择皮肤功能  ==========================--%>
	<jsp:include page="../common/framework/page-set.jsp" />
</div>
	<div id="floating-top-right" class="floating-container"></div>
<%--===================================================--%>
<%-- END OF CONTAINER --%>

<jsp:include page="../common/framework/script.jsp" />
	<script src="${pageContext.request.contextPath}/static/js/common/bootdatatable.init.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/bootstrap-table.min.js"></script>
	<script src="${pageContext.request.contextPath}/static/plugin/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>


	<script type="text/javascript">
	//初始化
	$(function(){
	/*表单验证  */
	//表单验证
		 $('#projectForm').bootstrapValidator({
	   		   message: 'This value is not valid',
	           feedbackIcons: {
	        	   valid:'glyphicon glyphicon-ok',
	        	   invalid:'glyphicon glyphicon-remove',
	        	   validating:'glyphicon glyphicon-refresh'
	           },
	           excluded: [':disabled'],
	            fields: {
	            	projectName :{
						message : '项目名称验证失败',
						validators : {
							notEmpty : {//非空验证：提示消息
								message : '项目名称不能为空'
							},
							stringLength: {/*长度提示*/
							    min: 1,
							    max: 100,
							    message: '项目名称不能超过100个字符'
							   }
						}
					},
					prokey :{
						message : '项目编号验证失败',
						validators : {
							stringLength: {/*长度提示*/
							    min: 1,
							    max: 40,
							    message: '项目编号不能超过40个字符'
							   }
						}
					},
					description :{
						message : '描述验证失败',
						validators : {
							stringLength: {/*长度提示*/
							    min: 1,
							    max: 200,
							    message: '描述不能超过200个字符'
							   }
						}
					}

	               }
	        });
		 $('#addSuiteForm').bootstrapValidator({
	   		   message: 'This value is not valid',
	           feedbackIcons: {
	        	   valid:'glyphicon glyphicon-ok',
	        	   invalid:'glyphicon glyphicon-remove',
	        	   validating:'glyphicon glyphicon-refresh'
	           },
	           excluded: [':read-only'],
	            fields: {
	            	suiteName :{
						message : '套件名称验证失败',
						validators : {
							notEmpty : {//非空验证：提示消息
								message : '套件名称不能为空'
							},
							stringLength: {/*长度提示*/
							    min: 1,
							    max: 100,
							    message: '套件名称长度必须在1到100个字之间'
							   }
						}
					}

	               }
	        });
	})

$(function() {
	//加载表格
	$('#projectTable').bootdatagrid(
			"${pageContext.request.contextPath}/projectSet/queryProject", {
				pagination : true,
				pageNumber : 1,
				pageSize : 10,
				dataType:'json',
				singleSelect : true,
				striped : true,
				clickToSelect : true
	});

})
function invoiceFormatter(value,row,index){
	return 'ID '+value;
}
function pref_btns(value,row,index){
	var btns = '';
	btns += '<a class="btn-table-cell" onclick="addSuite('+index+');">新增套件</a>';
	btns += ' | <a class="btn-table-cell" onclick="tablebtnclick(this);">套件设置</a>';
	btns += ' | <a class="btn-table-cell" onclick="addOrEditProject('+index+');">编辑</a>';
	btns += ' | <a class="btn-table-cell" onclick="deleteProject('+index+');">删除</a>';
	return btns;
}

function tablebtnclick(e){
	Alert.success($(e).text());
}
function searchProjectName(){
	var params={
            silent: true,
            url:path+"/projectSet/queryProject?projectName="+$('#searchProjectName').val()
    };
	$('#projectTable').bootstrapTable('refresh',params);
	
}
//添加按钮
$("#insert").click(function(){
	var index = -1;
	addOrEditProject(index);
});
function addOrEditProject(index){
	$('#projectForm').data('bootstrapValidator').resetForm(true);
	console.log("index: "+index);
	 if(index != -1){
	    	var row = $("#projectTable").bootstrapTable('getData')[index];
	    	//编辑时，取出参数显示在编辑框
	    	projectName = row.projectName;
	    	if(projectName)
	    		document.getElementById("projectName").value = projectName;
	    	//编辑时，取出参数显示在编辑框
	    	prokey = row.prokey;
	    	if(prokey)
	    		document.getElementById("prokey").value = prokey;
	    	//编辑时，取出配置参数显示在编辑框
	    	description = row.description;
	    	if(description)
	    		document.getElementById("description").value = description;
	    }else{
	    	document.getElementById("projectName").value = "";
	    	document.getElementById("prokey").value = "";
	    	document.getElementById("description").value = "";
	    }
	layer.open({
		type : 1,
		title : (index != -1) ? '编辑项目' : '添加项目',
		fix : true,
		scrollbar : false,
// 		maxmin: true, //开启最大化最小化按钮
		area : [ '550px', '300px' ],
		shift : 2,
		content : $('#addOrEditProjectHtml'),
		btn:['确定','取消'],
		success: function(layero, index){
			if(!$('.layui-layer-title').has('span').length){
				 $(".layui-layer-title").prepend("<span class='glyphicon glyphicon-th-large' ></span>&nbsp;");
			 }
	  	},
		end : function() {
		},
		yes: function(){
			saveProject(index);//保存
		  },
		btn2: function(index, layero){
		    //按钮【按钮二】的回调
		  },
	});
	};

	function saveProject(flag){
		console.log("flag:"+flag);
		var bootstrapValidator = $("#projectForm").data('bootstrapValidator').validate();
    	if(bootstrapValidator.isValid()){
    		var params = {};
    		if(flag == -1){
    			params = {
    					"projectName":$('#projectName').val(),
    					"prokey":$('#prokey').val(),
    					"description":$('#description').val(),
    					"flag":flag
    			};
    			
    		}else{
    			var row = $("#projectTable").bootstrapTable('getData')[flag];
    			var projectId = row.projectId;
    	    	var parentProjectName = row.projectName;
    			params = {
    					"projectId":projectId,
    					"projectName":$('#projectName').val(),
    					"prokey":$('#prokey').val(),
    					"description":$('#description').val(),
    					"flag":flag,
    					"parentProjectName":parentProjectName
    			};
    		}
    		console.log("param: "+JSON.stringify(params));
    		$.ajax({
    	        type : "post",
    	        url :path+'/projectSet/saveProject',//找到controller里相应的方法
    	        data : params, //把数组的值赋给data，把上面的param改为data,这里就能直接去掉
    	        dataType : "json",//根据数据类型选择text、jason等
    	        success : function(data) { 
    	        	console.log(data);
    	        	if(data == true){
    	        		var params={
    	        	            silent: true,
    	        	            url:path+"/projectSet/queryProject"
    	        	    };
    	        		$('#projectTable').bootstrapTable('refresh',params);
    	        		layer.closeAll();
    	        		toast.success('操作成功！','成功提示');
    	        	}else{
    	        		toast.error('操作失败！','失败提示');
    	        	}
    	        }
    	       });
    		
    	}
		
		
		
	};
	
	function deleteProject(index){
		layer.confirm('确定要删除该项目吗？', {icon: 3, title:'<span class="glyphicon glyphicon-th-large"></span>&nbsp;提示'}, function(){
			var rowData = $("#projectTable").bootstrapTable('getData')[index];
			 var projectId = rowData.projectId;
			 
			 $.ajax({
	    	        type : "post",
	    	        url : path+'/projectSet/deleteProject',//找到controller里相应的方法
	    	        data : {"projectId":projectId}, //把数组的值赋给data，把上面的param改为data,这里就能直接去掉
	    	        dataType : "json",//根据数据类型选择text、jason等
	    	        success : function(data) { 
	    	        	console.log(data);
	    	        	if(data == true){
	    	        		var params={
	    	        	            silent: true,
	    	        	            url:path+"/projectSet/queryProject"
	    	        	    };
	    	        		$('#projectTable').bootstrapTable('refresh',params);
			        		parent.layer.closeAll();
			        		parent.toast.success('操作成功！','成功提示');
			        	}else{
			        		toast.error('操作失败！','失败提示');
			        	}
	    	        }
	    	       });
		});
		
	};
	//新增套件
	function addSuite(index) {
			var row = $("#projectTable").bootstrapTable('getData')[index];
			var projectId = row.projectId;
			var suiteId = row.suiteId;
			var projectName = row.projectName;
			var str = encodeURI(encodeURI(projectName));
			console.log(projectId);
			console.log(suiteId);
			console.log(projectName);
			layer.open({
				type : 1,
				title : '新增套件',
				fix : true,
				scrollbar : false,
				area : [ '500px', '220px' ],
				shift : 2,
				content : $('#addSuitHtml'),
				btn: ['确定', '取消'],
					yes : function(index, layer) {
// 			            var iframeWin = layer.find('iframe')[0];
// 			            iframeWin.contentWindow.submit();
			        },
			        btn2:function(index, layer) {

			        },
			});
	};
</script>
</body>
</html>

